<template>
  <div class="blog-item">
    <div class="avatar-wrap">
      <img
        :src="blog.avatar"
        alt
        class="avatar"
      />
    </div>
    <div class="info">
      <div class="content">
        <a
          @click.prevent='$router.push(`/space/${blog.userId}`)'
          href="#"
        >{{blog.username}}:</a>
        {{blog.content}}
      </div>
      <div class="img-wrap">
        <img
          :key="imgsrc"
          :src="imgsrc"
          alt
          class="img-single"
          v-for="imgsrc in JSON.parse(blog.image)"
        />
      </div>
      <div class="plulish-time">
        {{formatTime(blog.createdAt)}}
        <a href="#" @click.prevent="() => {}">
          <i class="iconfont icon-huifu"></i> 回复
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import {} from "vue";
import { formatTime } from "../../utils/timeFormat";

export default {
  name: "BlogItem",
  props: {
    blog: Object,
  },
  components: {},
  setup(props, content) {
    // console.log(props.blog);

    return {
      formatTime,
    };
  },
};
</script>

<style scoped lang='stylus' >
.blog-item
  display flex
  border-bottom 1px solid #f1f1f1
  padding 17px 0

  .content
    margin-bottom 10px
    color #000

  .plulish-time
    font-size 12px
    color #666

  .avatar-wrap
    width 50px
    min-width 50px
    text-align center
    margin-right 10px

    .avatar
      width 48px
      height 48px
      border-radius 50%

.img-wrap
  margin-bottom 10px

  .img-single
    width 100px
    margin-right 10px
</style>